<template>
  <div class="flex">
    <template v-if="getToken()">
      <a-popover trigger="click" placement="bottomRight" v-model:open="popoverVisible">
        <a-flex>
          <div class="system__icon icon" @click="popoverVisible = true">
            <span v-if="user.$state.userInfo" class="flex flex-s gap-2">
              {{ user.$state.userInfo.userName }}
              <DownOutlined class="text-[10px]" />
            </span>
            <span class="text-[12px] text-gray-400" v-else>未登录</span>
          </div>
        </a-flex>
        <template #content>
          <a-card
            style="width: 200px; min-height: '300px'"
            :loading="loading"
            :bordered="false"
            :body-style="{ padding: '0' }"
          >
            <div v-if="userProfile">
              <div class="flex align-center gc-12">
                <a-avatar :src="getImageByFullPath(userProfile.avatar)"></a-avatar>
                {{ userProfile.userName }}
              </div>
              <a-divider class="my-12"></a-divider>
              <a-descriptions :column="1" size="small">
                <a-descriptions-item label="用户账号">
                  {{ userProfile.userName }}
                </a-descriptions-item>
                <a-descriptions-item label="用户昵称">
                  {{ userProfile.nickName }}
                </a-descriptions-item>
                <a-descriptions-item label="用户邮箱">
                  {{ userProfile.email }}
                </a-descriptions-item>
                <a-descriptions-item label="用户性别">
                  {{ getLabel(sexOptions, userProfile.sex) }}
                </a-descriptions-item>
                <a-descriptions-item label="用户角色" v-if="userData">
                  <a-tag v-for="(item, key) in userData.roles" :key="key">
                    {{ item.roleName }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="用户部门">
                  {{ userData?.dept?.deptName }}
                </a-descriptions-item>
              </a-descriptions>
              <a-divider class="my-12"></a-divider>
              <a-button block @click="editProfile" class="mb-12">编辑信息</a-button>

              <a-button type="primary" danger block @click="logout">退出登录</a-button>
            </div>
            <a-empty v-else description="加载中..." />
          </a-card>
        </template>
      </a-popover>
    </template>

    <!--  -->
    <div class="system__icon icon" v-if="!getToken()" @click="openLogin">
      <UserOutlined />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { UserProfileData } from '@/api/modules/system/user/types';
import { userLogout } from '@/api/modules/system/user/utils';
import { getImageByFullPath, getSystemIcon } from '@/api/utils/image';
import { sexOptions } from '@/global/options/system';
import { openLogin } from '@/global/window/widget';
import { openWindow } from '@/global/window/window';
import useUserStore from '@/store/user';
import { getToken } from '@/store/user/utils';
import { getLabel } from '@/utils/common/utils';
import { UserOutlined } from '@ant-design/icons-vue';
import { Modal, message } from 'ant-design-vue';
import ProFileForm from '../profile-form/ProfileForm.vue';
import { getProfile, userProfile } from './data';

const popoverVisible = ref(false);

const userData = ref<UserProfileData>();

const loading = ref(false);

const user = useUserStore();
/**
 * @description: 点击获取个人信息
 */
const getInfo = async () => {
  loading.value = true;
  userData.value = await getProfile();
  loading.value = false;
};
const editProfile = () => {
  openWindow({
    title: '用户中心',
    component: markRaw(ProFileForm),
    id: 'user-center',
    icon: getSystemIcon('user.png'),
  });
  popoverVisible.value = false;
};

const logout = async () => {
  popoverVisible.value = false;
  Modal.confirm({
    title: '警告',
    async onOk() {
      await userLogout();
      message.success('已退出');
      openLogin();
    },
    centered: true,
    content: '将会退出登录',
  });
};

watch(
  popoverVisible,
  v => {
    if (v) {
      if (!getToken()) return;
      getInfo();
    }
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="scss" scoped>
.profile {
  width: 200px;
}
:deep(.ant-card-body) {
  box-shadow: none !important;
}
</style>
